@import "@/style/var.less";

.read-home-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  background: url("~assets/super-read/index-bg.png") center/100% 100% no-repeat;
  padding: 0 100px;
  box-sizing: border-box;
  background-size: cover;

  .home-content {
    position: relative;
    display: flex;
    min-height: 500px;
    flex-direction: column;
    background: url("~assets/super-read/index-content-bg.png") center/115%
      115% no-repeat;
    box-shadow: 0px 3px 30px rgba(22, 131, 18, 0.16);
    border-radius: 20px;

    .back-arrow {
      position: absolute;
      left: 30px;
      top: 30px;
      width: 30px;
      height: 27px;
      background-image: url("~assets/home/btn_back.png");
      background-size: 100%;
      cursor: pointer;
    }
    .home-head {
      margin-top: 44px;
      .read-logo {
        width: 374px;
        margin: 0 auto;
        img {
          width: 100%;
        }
      }
      .checkcourse-title {
        margin-top: 25px;
        cursor: pointer;
        font-size: 20px;
      }
    }
  }

  .home-center {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-top: 40px;
    .read-item {
      width: 320px;
      cursor: pointer;
      &:nth-child(1) {
        margin-right: 114px;
      }
      img {
        width: 100%;
      }
    }
    .read-item1 {
      width: 145px;
      cursor: pointer;
      &:nth-child(1) {
        margin-right: 142px;
      }
      &:nth-child(2) {
        margin-right: 142px;
      }
      img {
        width: 100%;
      }
    }
  }

  .home-bottom {
    width: 560px;
    margin: 40px auto;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    .read-process,
    .blank-process {
      position: relative;
      overflow: hidden;
      width: 200px;
      height: 30px;
      line-height: 30px;
      text-align: left;
      border-radius: 5px;
      .process-text {
        position: absolute;
        left: 0;
        width: 100%;
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        .process-num {
          font-family: "Klavika";
        }
      }
    }
    .total {
      display: inline-block;
      height: 30px;
      line-height: 30px;
      i {
        font-family: "Klavika";
        font-size: 16px;
        color: #1da28a;
      }
    }
    .read-process {
      background-color: #ffefe2;
      .process-text {
        color: #69380e;
      }
      .processed {
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
        height: 30px;
        background-color: #ffd1a5;
      }
    }
    .blank-process {
      background-color: #e0e9ff;

      .process-text {
        color: #010614;
      }
      .processed {
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
        height: 30px;
        background-color: #bccfff;
      }
    }
  }

  @media screen and (min-width: 1620px) {
    .home-content {
      height: 750px;
      width: 1300px;
    }
  }

  @media screen and (min-width: 1200px) and (max-width: 1620px) {
    .home-content {
      height: 650px;
      width: 1150px;
    }
    .home-center {
      .read-item {
        width: 280px;
        cursor: pointer;
        &:nth-child(1) {
          margin-right: 114px;
        }
        img {
          width: 100%;
        }
      }
      .read-item1 {
        width: 120px;
        cursor: pointer;
        &:nth-child(1) {
          margin-right: 142px;
        }
        &:nth-child(2) {
          margin-right: 142px;
        }
        img {
          width: 100%;
        }
      }
    }
  }

  @media screen and (max-width: 1200px) {
    .home-content {
      height: 500px;
      width: 900px;
    }
    .home-center {
      .read-item {
        width: 200px;
        cursor: pointer;
        &:nth-child(1) {
          margin-right: 114px;
        }
        img {
          width: 100%;
        }
      }
      .read-item1 {
        width: 100px;
        cursor: pointer;
        &:nth-child(1) {
          margin-right: 142px;
        }
        &:nth-child(2) {
          margin-right: 142px;
        }
        img {
          width: 100%;
        }
      }
    }
  }
}
@media screen and (min-width: 1620px) {
  .read-home-wrap {
    min-height: 750px;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1620px) {
  .read-home-wrap {
    min-height: 650px;
  }
}

@media screen and (max-width: 1200px) {
  .read-home-wrap {
    min-height: 600px;
  }
}
